<!-- 选择银行卡信息 -->
<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <view class="u-page">
      <view class="color-list">
        <view class="color-item flex flex-jsb" v-for="(item,index) in list" :key="item.value">
          <liu-swipe-action
            ref="liuSwipeAction"
            :index="index"
            @clickItem="liuClickItem"
            :btnList="btnList"
          >
            <view class="flex flex-jsb">
              <view class="title">
                {{ item.accountName }}
              </view>
              <view class="title">
                {{ item.amountPaid }}
              </view>
            </view>
          </liu-swipe-action>
        </view>
      </view>
    </view>
    <!-- 添加结款方式 -->
    <u-popup :show="show" :round="10" mode="center" :closeOnClickOverlay="false">
      <view class="popup-view">
        <view class="title">
          结款方式
        </view>
        <view class="form-view m-b-40">
          <view class="form-item"
            @click="go('/pages/application/pages/finance/account/bank-list/bank-list', { listOptionsOnCurrentShop: true })">
            银行:<u--input border="surround" v-model="label.accountName" @focus="go('/pages/application/pages/finance/account/bank-list/bank-list', { listOptionsOnCurrentShop: true })"></u--input>
          </view>
          <view class="form-item">
            金额:<u--input border="surround" type="number" v-model="label.amountPaid"></u--input>
          </view>
          <view class="form-item">
            备注:<u--input border="surround" v-model="label.remarks"></u--input>
          </view>
        </view>
        <view class="bot-view flex flex-sa">
          <view class="btn" @click="onCencal">
            取消
          </view>
          <view class="btn" @click="onSave">
            保存
          </view>
        </view>
      </view>
    </u-popup>
    <view class="fixed-btn">
      <u-button text="保存" @click="save()" type="primary" shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
    </view>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      search: null,
      indexList: [],
      btnList: [
        {
          id: "2",
          name: "删除",
          width: "100rpx",
          bgColor: "#ed656d",
          color: "#FFFFFF",
          fontSize: "28rpx",
        },
      ],
      config: {
        title: "结款方式",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
      // 颜色列表
      list: [],
      params: {
        data: {},
        page: {
          current: 1,
          size: 10
        }
      },
      // 显示模态框
      show: false,
      label: {
        "accountName": "", // 账户
        "amountPaid": "", // 金额
        "accountId": "" //账户id
      }
    };
  },
  computed: {},
  onLoad(opt) {
    if (opt.data) {
      this.list = opt.data
    }
  },
  methods: {
    liuClickItem(item) {
      this.$refs.liuSwipeAction[item.index].reset();
      this.list.splice(item.index, 1);
    },
    save(){
      uni.$emit("receiptSelectBank",this.list)
      uni.navigateBack()
    },
    // 页面跳转
    go(item, query = {}) {
      this.$Router.push({
        path: item,
        query: query
      });
    },
    scrolltolower() { },
    clickBtn(item) {
      if (item.key === "btn1") {
        this.show = true
      }
    },
    onCencal() {
      this.label = {
        "accountName": "", // 账户
        "amountPaid": "", // 金额
        "accountId": "" //账户id
      }
      this.show = false
    },
    onSave() {
      this.list.push(this.label)
      this.label = {
        "accountName": "", // 账户
        "amountPaid": "", // 金额
        "accountId": "" //账户id
      }
      this.show = false
    },
  },
  mounted() {
    uni.$on('selectedBank', data => {
      this.label.accountName = data.label
      this.label.accountId = data.value
    })

  },
  beforeDestroy() {
    uni.$off("selectedBank");
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

.color-list {
  background-color: #fff;

  .color-item {
    height: 80rpx;
    font-size: 28rpx;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #eee;
    line-height: 80rpx;
  }
}
</style>
